<route lang="json5" type="payList">
{
  layout: 'default',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '设备管理 > 支付套餐',
    enablePullDownRefresh:false
  },
}
</route>

<script setup lang="ts">
import { ref } from 'vue'
import { getPayList } from '@/api/device'

const loadState = ref<'loading' | 'error' | 'finished'>('loading')
function loadMore() {
  console.log('滚动到底部加载更多数据')
  getPayList().then((res: any) => {
    console.log(res)
    const { code, text } = res
    if (code === 0) {
      loadState.value = 'error'
      uni.showToast({
        title: text,
        icon: 'none',
      })

      // uni.redirectTo({
      //   url: '/pages/login/login',
      // })
    }
  })
}

const showEdit = ref(false)
const editRef = ref()
const formModel = ref({
  name: '',
  price: '',
  coin: '',
})
function handleSubmit() {
  editRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('表单验证通过')
      handleClose()
    }
    else {
      console.log('表单验证不通过')
    }
  })
}

function handleEdit() {
  showEdit.value = true
}
function handleClose() {
  showEdit.value = false
}
</script>

<template>
  <scroll-view class="scroll-view" :scroll-y="true" @scrolltolower="loadMore">
    <view class="wot-list">
      <view class="wot-row wot-title">
        <wd-row>
          <wd-col :span="8">
            <view class="wot-item">
              套餐名称
            </view>
          </wd-col>
          <wd-col :span="8">
            <view class="wot-item">
              金额 / 上币
            </view>
          </wd-col>
          <wd-col :span="8">
            <view class="wot-item">
              操作
            </view>
          </wd-col>
        </wd-row>
      </view>
      <view v-for="(item, index) in 40" :key="index" class="wot-row">
        <wd-row>
          <wd-col :span="8">
            <view class="wot-item">
              20元30币
            </view>
          </wd-col>
          <wd-col :span="8">
            <view class="wot-item">
              <wd-tag custom-class="tag" type="success">
                1.00元1币
              </wd-tag>
            </view>
          </wd-col>
          <wd-col :span="8">
            <view class="wot-item">
              <wd-tag type="primary" custom-class="tag" @click="handleEdit">
                修改
              </wd-tag>
            </view>
          </wd-col>
        </wd-row>
      </view>
    </view>
    <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
  </scroll-view>

  <wd-action-sheet v-model="showEdit" title="【 修改 > 套餐 】" @close="handleClose">
    <view class="action-sheet-content">
      <wd-form ref="editRef" :model="formModel">
        <wd-cell-group border>
          <wd-input
            v-model="formModel.name"
            label="套餐名称"
            label-width="100px"
            prop="name"
            clearable
            placeholder="如1元1币"
            :rules="[{ required: true, message: '套餐名称不能为空' }]"
          />
          <view class="wot-tips">
            多少钱/多少币 或 多少钱/多少秒
          </view>
          <wd-input
            v-model="formModel.price"
            label="多少钱"
            label-width="100px"
            prop="price"
            clearable
            placeholder="支付多少钱"
            :rules="[{ required: true, message: '套餐金额不能为空' }]"
          />
          <view class="wot-tips">
            与{ 设备配置 }里的{ 支付单位 }有关
          </view>
          <wd-input
            v-model="formModel.coin"
            label="多少币"
            label-width="100px"
            prop="coin"
            clearable
            placeholder="上多少币"
            :rules="[{ required: true, message: '套餐上币数不能为空' }]"
          />
          <view class="wot-tips">
            换算: 1元1秒 = 1000毫秒
          </view>
        </wd-cell-group>
        <view class="footer">
          <wd-button type="primary" size="small" block @click="handleSubmit">
            提交
          </wd-button>
        </view>
      </wd-form>
    </view>
  </wd-action-sheet>
</template>

<style lang="scss" scoped>
.footer {
  padding-top: 40rpx;
}
</style>
